<template>
  <div class="cuscomp" :class="readonly ? 'show' : ''">
    <div class="comp_label">{{ label }}</div>
    <div class="comp_cont_warp" v-if="value">
      <div v-for="(item, index) in value " :key="index" class="cuscomp_cont">
        <div class="itemform">
          <label>装置类型</label>
          <CySelect :readonly="readonly ? readonly : false" v-model="value[index].deviceType" style="width:150px"
            :data="state.typeData" @change="valueChange(item, index)">
          </CySelect>
        </div>
        <div class="itemform">
          <label>装置名称</label>
          <CySelect :readonly="readonly ? readonly : false" filterable allow-create v-model="value[index].deviceName"
            style="width:150px" :data="state.nameData" @change="valueChange(item, index)">
          </CySelect>
        </div>
        <div class="itemform">
          <label>用量</label>
          <el-input :readonly="readonly ? readonly : false" v-model="value[index].itemVals" style="width:200px"
            @change="valueChange(item, index)">
            <template #append>万方</template>
          </el-input>
        </div>
        <div class="itemform">
          <div class="cuscomp_tile" style="margin-left: 50px">同比</div>
          <div class="comp_value">
            <el-icon class="comp_icon" v-if="value[index].yoyExceed == 3">
              <Top size="20" color="#F56C6C" />
            </el-icon>
            <el-icon class="comp_icon" v-if="value[index].yoyExceed == 2">
              <Bottom size="20" color="#67C23A" />
            </el-icon>
            <span>{{ value[index].yoy }}%</span>
          </div>
          <div class="cuscomp_tile">环比</div>
          <div class="comp_value">
            <el-icon class="comp_icon" v-if="value[index].ringRatioExceed == 2">
              <Top size="20" color="#F56C6C" />
            </el-icon>
            <el-icon class="comp_icon" v-if="value[index].ringRatioExceed == 3">
              <Bottom size="20" color="#67C23A" />
            </el-icon>
            <span>{{ value[index].ringRatio }}%</span>
          </div>
        </div>
        <div v-show="value[index].ringRatioExceed > 1 || value[index].yoyExceed > 1" class="itemform" style="width:100%">
          <label>说明情况</label>
          <el-input :readonly="readonly ? readonly : false" style="width: calc(100% - 100px)"
            v-model="value[index].remark"></el-input>
        </div>
        <div class="cuscomp_cont_btn">
          <template v-if="!readonly">

            <el-button v-if="index == 0" :icon="Plus" type="primary" plain @click="add"></el-button>
            <el-button v-else :icon="Minus" type="info" plain @click="deletecur(index)"></el-button>
          </template>
        </div>
        <el-divider v-if="index < value.length - 1" style="margin:10px 0 0 0" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, onBeforeMount, watch, watchEffect } from 'vue'
import { Top, Bottom, Plus, Minus } from '@element-plus/icons'
import CySelect from '_c/select/index.vue'
const emptyObj = {
  deviceType: '', //装置类型
  deviceName: '', // 装置名称
  itemVals: '', // 用量
  yoy: null, // 同比
  ringRatio: null, // 环比
  yoyExceed: null,// 同比超标情况 1:不超标，2是下线超标，3是上线超标
  ringRatioExceed: null,// 环比超标情况 1:不超标，2是下线超标，3是上线超标
  remark: '',// 描述
}
const props = defineProps({
  modelValue: [Array, Object],
  label: String,
  unit: String, // 单位
  readonly: Boolean, // 只读
  itemCode: [String, Number],
  organId: [String, Number]
})
let value = reactive([JSON.parse(JSON.stringify(emptyObj))])
const state = reactive({
  typeData: [{ label: 'text', value: 'text' }],
  nameData: [{ label: 'text', value: 'text' }],
  loading: false
})

// 添加
const add = () => {
  value.push(JSON.parse(JSON.stringify(emptyObj)))
}

// 删除
const deletecur = (index) => {
  value.splice(index, 1)
}

const valueChange = (item, index) => {
  if (item.itemVals && item.deviceType && item.deviceName) {
    getYearAndMonth(item, index)
  }
}
//  获取同比环比情况
const getYearAndMonth = (info, index) => {
  value[index].yoy = 1
  value[index].ringRatio = 1
  value[index].yoyExceed = 1
  value[index].ringRatioExceed = 1

}

const emit = defineEmits(['update:modelValue'])
watch(value, () => {
  emit('update:modelValue', [...value])
  debugger
}, { deep: true })
watchEffect(() => {
  if (props.modelValue) {
    if (props.modelValue instanceof Array && props.modelValue.length > 0) {
      value = props.modelValue
    } else {
      value = [JSON.parse(JSON.stringify(emptyObj))]
      emit('update:modelValue', [...value])
    }
  }
})
onBeforeMount(() => {
})

</script>

<style lang="scss" scoped>
.cuscomp {
  padding-left: 140px;
  position: relative;
  box-sizing: border-box;

  .comp_label {
    width: 140px;
    text-align: right;
    padding-right: 10px;
    padding-top: 10px;
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
  }

  .cuscomp_tile {
    width: 30px;
    text-align: right;
    padding-right: 10px;
  }
}

.comp_value {
  width: 80px;
  text-align: center;
  height: 30px;
  border-bottom: 1px solid var(--el-border-color);
}

.comp_icon {
  margin-right: 10px;
  font-weight: 600;
}

.comp_cont_warp {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--el-border-color);
  border-radius: 3px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 0;
}

.cuscomp_cont {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px;
  padding-right: 80px;
  position: relative;
  box-sizing: border-box;

  .cuscomp_cont_btn {
    position: absolute;
    right: 10px;
    top: 10px;
  }

  &>.itemform {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 20px;
    justify-content: flex-start;
    margin-bottom: 10px;

    label {
      margin-right: 10px;
    }
  }
}
</style>
